<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Three.js 魔法阵功能1</title>
  <style>
    body { margin: 0; overflow: hidden; }
    canvas { display: block; }
  </style>
</head>
<body>
  <script type="module">
    import * as THREE from 'https://cdn.jsdelivr.net/npm/three@0.160.1/build/three.module.js';

    // 创建场景、相机、渲染器
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
    camera.position.set(0, 10, 10);
    camera.lookAt(0, 0, 0);

    const renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    // 添加环境光
    const ambientLight = new THREE.AmbientLight(0xffffff, 1);
    scene.add(ambientLight);

    // 创建旋转的底部图案（魔法阵底图）
    const loader = new THREE.TextureLoader();
    loader.load('http://47.106.36.64:9191/download/chenwei/3.jpeg', (texture) => {
      const geometry = new THREE.PlaneGeometry(5, 5);
      const material = new THREE.MeshBasicMaterial({
        map: texture,
        transparent: true,   // 若图片有透明通道
        side: THREE.DoubleSide,
      });
      const magicCircle = new THREE.Mesh(geometry, material);
      magicCircle.rotation.x = -Math.PI / 2; // 贴地
      scene.add(magicCircle);

      // 动画：让魔法阵旋转
      function animate() {
        requestAnimationFrame(animate);
        magicCircle.rotation.y += 0.01;
        renderer.render(scene, camera);
      }
      animate();
    });

    // 自适应窗口大小
    window.addEventListener('resize', () => {
      camera.aspect = window.innerWidth / window.innerHeight;
      camera.updateProjectionMatrix();
      renderer.setSize(window.innerWidth, window.innerHeight);
    });
  </script>
</body>
</html>
